<template>
  <div class="content">
    <div v-for="item in dataList" class="item" @click="clickVideo(item)">
      <img :src="item.Cover" alt="" v-if="item.Cover" />
      <img src="../assets/images/bg2.jpg" alt="" v-else />
      <div class="foot">
        <div class="title">{{ item.Title }}</div>
        <!-- <div class="dsce">刷卡后商家承诺手机号及上传</div> -->
      </div>
    </div>
    <el-dialog
      title=""
      :close-on-click-modal="false"
      :before-close="leadCloses"
      :visible.sync="vFlag"
      append-to-body
      fullscreen
    >
      <div class="videoPlayer" v-if="vFlag">
        <xg-player :video="video"></xg-player>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import XgPlayer from "@/components/xgPlayer";
export default {
  props: ["typeVideoList"],
  components: {
    XgPlayer,
  },
  data() {
    return {
      dataList: [],
      vFlag: false,
      video: "",
    };
  },
  watch: {
    typeVideoList(val, old) {
      //传过来的data数据改变时触发，val是新值，old是旧值
      this.dataList = val;
    },
  },
  mounted() {
    this.dataList = this.typeVideoList;
  },
  methods: {
    clickVideo(item) {
      this.video = item;
      console.log(item);
      this.vFlag = true;
    },
    leadCloses() {
      this.vFlag = false;
    },
  },
};
</script>

<style scoped>
.content {
  width: 98%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: 20px;
}
.item {
  width: 23%;
  margin: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}
img {
  width: 100%;
  height: 240px;
}
.foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: rgba(35, 35, 35, 0.8);
  padding: 5px 20px;
  color: #fff;
}
.title {
  margin-bottom: 10px;
}
.dsce {
  font-size: 14px;
  color: #5d5e67;
}
.foot:hover {
  background-color: rgb(34, 41, 47);
}

/deep/ .el-dialog {
  /* background: transparent; */
  /* background-image: url(../assets/images/bg3.jpg);
  background-size: 100% 100%; */
  background-color: #000000;
}
/* // 头部 */
/deep/ .el-dialog__title {
  color: #fff;
}
.videoPlayer {
  height: 600px;
  width: 1100px;
  margin: 0 auto;
}
</style>